<template>
	<view class="bill-container flex fd-c">
		<topBar :back="false">

		</topBar>
		<!-- 内容区域 -->
		<scroll-view class="flex-1" style="overflow-y: auto;" scroll-y>
			<!-- 商品列表 -->
			<view class="shop-container">
				<view class="gift-cards-grid">
					<view v-for="(card, index) in goodsList" :key="index" class="gift-card-item"
						@click="selectCard(card)">
						<!-- 购物卡 -->
						<view class="gift-card flex jc-fs ai-fs">
							<image :src="BASE_URL + card.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
						</view>
						<!-- 卡片信息 -->
						<view class="card-info">
							<view class="card-name">{{ card.goods_name }}</view>
							<view class="card-points">{{ card.points }} <text style="font-size: 22rpx;">积分</text></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { BASE_URL } from '@/utils/request'
const goodsList = ref([])
onLoad(() => {
	api.getGoodsList().then(res => {
		goodsList.value = res.data
	})
})

// 选择购物卡
const selectCard = (card) => {
	uni.navigateTo({
		url: `/pages/shop/detail?id=${card.id}`
	})
}

</script>

<style scoped>
.bill-container {
	height: 100vh;
	background-color: #F7F7F7;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 商城容器 */
.shop-container {
	background-color: #F7F7F7;
	min-height: 100%;
	padding: 32rpx;
	box-sizing: border-box;
}

.shop-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 32rpx;
	text-align: center;
}

/* 购物卡网格 */
.gift-cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rpx;
}

/* 购物卡项目 */
.gift-card-item {
	background-color: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 42rpx rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gift-card-item:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}

/* 购物卡 */
.gift-card {
	position: relative;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	/* overflow: hidden; */
	aspect-ratio:166 / 104;
}

/* 橙色卡片 */
.card-orange {
	background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
}

/* 蓝色卡片 */
.card-blue {
	background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}

/* 背景图案 */
.card-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 品牌区域 */
.card-brand {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: auto;
}

.jd-logo-small {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.brand-text {
	color: white;
	font-size: 20rpx;
	font-weight: 500;
}

/* 主logo */
.main-logo {
	position: relative;
	z-index: 2;
	font-size: 48rpx;
	font-weight: bold;
	color: white;
	text-align: center;
	letter-spacing: 4rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 面额 */
.card-value {
	position: relative;
	z-index: 2;
	color: white;
	font-size: 28rpx;
	font-weight: bold;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

/* 卡片信息 */
.card-info {
	padding: 24rpx 32rpx;
}

.card-name {
	font-size: 30rpx;
	color: #000;
	font-weight: 500;
	margin-bottom: 8rpx;
}

.card-points {
	font-size: 30rpx;
	color: #007AFF;
	font-weight: 500;
}
</style>
